<template>
    <el-card shadow="never" class="border-0">

        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
            <el-col :span="5">
                <el-form-item label="出入类型">
                    <el-select v-model="searchForm.recordType" filterable placeholder="请选择出入类型">
                        <el-option
                        v-for="item in recordTypeDic"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="10">
                <div class="flex items-center justify-end">
                <el-button type="primary" @click="getData(1)">搜索</el-button>
                <el-button @click="resetSearchForm">重置</el-button>
                </div>
            </el-col>
            </el-row>
        </el-form>

        <el-table :data="tableData" stripe style="width: 100%" v-loading="tableDataLoading">

            <el-table-column label="出入类型" align="center">
                <template #default="{ row }">
                {{ row.recordType==0?"入库":"出库" }}
                </template>
            </el-table-column>

            <el-table-column label="产品状态" align="center">
                <template #default="{ row }">
                {{ formatDeviceStatus(row.deviceStatus) }}
                </template>
            </el-table-column>

            <el-table-column label="人员姓名" align="center">
                <template #default="{ row }">
                {{ row.userName }}
                </template>
            </el-table-column>

            <el-table-column label="数量" align="center">
                <template #default="{ row }">
                {{ row.num }}
                </template>
            </el-table-column>

            <el-table-column label="关联工单" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                {{ row.orderName }}
                </template>
            </el-table-column>

            <el-table-column label="备注" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                {{ row.remarks }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template #default="{ row }">
                {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" 
            :total="total" 
            :current-page="currentPage"
            :page-size="limit" 
            @current-change="getData" />
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, reactive, defineProps } from 'vue'
import { dateFormatter } from '~/utils/common.js'
import { formatDeviceStatus, getDeviceRecordList } from "~/api/supply"

//出入类型, 0入库, 1出库
const recordTypeDic = ref([{"key":0,"value":"入库"},{"key":1,"value":"出库"}])

const tableData = ref([]) // 列表数据
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const tableDataLoading = ref(false)

// props
const props = defineProps({
    deviceId: {
        type: Number, 
        default: null
    },
    isPart: {
        type: Number, 
        default: null
    }
})


// 查询条件
const searchForm = reactive({
    deviceId: props.deviceId,
    isPart: props.isPart,
    recordType: null,
    page: currentPage.value,
    size: limit.value,
})

// 重置搜索框
const resetSearchForm = () => {
    searchForm.recordType = null
    getData(1)
}

// 生命周期
onMounted(async () => {
    //加载表格数据
    await getData()
})


//获取列表数据
async function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    tableDataLoading.value = true
    searchForm.page = currentPage.value
    getDeviceRecordList(searchForm)
    .then(res => {
        if(res && res.records){
            tableData.value = res.records
            total.value = res.total
        }else{
            tableData.value = []
            total.value = 0
        }
    })
    .finally(() => {
        tableDataLoading.value = false
    })
}
</script>
